<template>

  <!--体: 展示视频的章集列表-->
  <section class="tab-catalog-body">

    <div v-if="chapters.length > 0">

      <!--当视频存在章列表时展示此容器: 遍历chapters-->
      <article v-for="(chapter, chapterIndex) in chapters" :key="chapter['chapterId']">

        <!--单元格: 章标题-->
        <van-cell-group :title="'CH' + index((chapterIndex + 1)) + '. ' + chapter['chapterTitle']">

          <!--当视频存在集列表时展示此容器: 遍历chapters-->
          <div v-if="chapter['episodes'].length > 0">

            <!--单元格项: 遍历episodes-->
            <van-cell v-for="(episode, episodeIndex) in chapter['episodes']"
                      :title="'EP' + index((episodeIndex + 1)) + '. ' + episode['episodeTitle']">

              <!--文本省略: 集描述，展示1行，显示展开和收起按钮-->
              <template #label>
                <van-text-ellipsis :content="episode['episodeInfo']" rows="1"
                                   expand-text=" 展开" collapse-text=" 折叠"/>
              </template>

            </van-cell>
          </div>

        </van-cell-group>

      </article>

    </div>

    <!--当视频不存在章集列表时展示此容器-->
    <div v-else>
      <article class="no-chapters-tips">该视频暂无章集信息，请联系运维人员</article>
    </div>

  </section>

</template>

<script setup>
import {computed} from "vue";

/* ==================== props ==================== */

// props: 接收父组件传递过来的值
let props = defineProps({
  chapters: {
    type: Array,
    default: [
      {
        "chapterTitle": "第1章",
        "episodes": [
          {
            "episodeTitle": "第1章第1集",
            "episodeInfo": "第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述第1章第1集-描述"
          },
          {"episodeTitle": "第1章第2集", "episodeInfo": "第1章第2集-描述"}
        ]
      }, {
        "chapterTitle": "第2章",
        "episodes": [
          {"episodeTitle": "第2章第1集", "episodeInfo": "第2章第1集-描述"},
          {"episodeTitle": "第2章第2集", "episodeInfo": "第2章第2集-描述"}
        ]
      }
    ]
  }
});

/* ==================== computed ==================== */

// computed: 计算索引，将小于10的索引补充 "0" 作为前缀
let index = computed(() => index => index < 10 ? '0' + index : '' + index);
</script>

<style scoped lang="scss">

.tab-catalog-body {

  text-align: left; // 内容居左

  .no-chapters-tips {
    text-align: center; // 内容居中
  }

}

</style>